<template>
  <Layout>
    <div class="wrap">
      <NavBar :rollback="false">统计</NavBar>
      <Types class="type"/>
    </div>
    <Chart :chartOption="chartOption"/>
    <RecordItem/>
  </Layout>
</template>

<script lang="ts">
import {Vue, Component} from 'vue-property-decorator';
import Types from '@/components/money/Types.vue';
import DateTypes from '@/components/statistics/DateTypes.vue';
import RecordItem from '@/components/statistics/RecordItem.vue';
import Chart from '@/components/Chart.vue';

@Component({
  components: {Chart, RecordItem, DateTypes, Types}
})
export default class Statistics extends Vue {

  recordResultList = [];

  get legendDate() {
    return this.$store.state.record.type === '-' ? '支出' : '收入';
  }


  get chartOption() {
    return {
      title: {
        text: ''
      },
      tooltip: {},
      grid: {
        bottom: '20%',
        top: '25%',
      },
      legend: {},
      xAxis: {
        data: this.xAxisDate,
        axisTick: {show: true}
      },
      yAxis: {},
      series: [{
        name: this.legendDate,
        type: 'line',
        smooth: true,
        data: this.amountDate,
      }]
    };
  }

  get chartRecordResultList() {
    return this.$store.state.recordResultList.reverse();
  }

  get xAxisDate() {
    let l = [] as string[];
    for (let i = 0; i < this.chartRecordResultList.length; i++) {
      l.push(this.chartRecordResultList[i].title);
    }
    return l;
  }


  get amountDate() {
    const l = [] as string[];
    for (let i = 0; i < this.chartRecordResultList.length; i++) {
      if (this.chartRecordResultList[i].expendAmount != 0) {
        l.push(this.chartRecordResultList[i].expendAmount);
      } else {
        l.push(this.chartRecordResultList[i].incomeAmount);
      }
    }
    return l;
  }
}
</script>

<style scoped lang="scss">
.type ::v-deep {
  background-color: white;

  span.selected {
    background-color: #c4c4c4;
    border-bottom: none;
  }
}

.wrap {
  position: sticky;
  top: 0;
  z-index: 1;
}

</style>